<template>
  <div class="home">
    <van-nav-bar
      :title="title"
      left-text="返回"
      right-text="按钮"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div class="container">
      <router-view></router-view>
    </div>
    <van-tabbar v-model="active">
      <van-tabbar-item name="home" icon="home-o">标签</van-tabbar-item>
      <van-tabbar-item name="search" icon="search" dot>标签</van-tabbar-item>
      <van-tabbar-item name="friends" icon="friends-o" badge="5"
        >标签</van-tabbar-item
      >
      <van-tabbar-item name="setting" icon="setting-o" badge="20"
        >标签</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
export default defineComponent({
  setup() {
    const { t } = useI18n();
    const router = useRouter();
    const route = useRoute();
    onMounted(() => {
      if (route.fullPath === "/") {
        router.push({ path: "/meter" });
      }
    });
    const onClickLeft = () => {};
    const onClickRight = () => {};
    return {
      title: t("Home"),
      active: ref("home"),
      onClickLeft,
      onClickRight,
    };
  },
  unmounted() {
    //this.testTimeout && clearTimeout(this.testTimeout);
  },
  components: {},
});
</script>

<style lang="scss" scoped>
.home {
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  .container {
    height: 100%;
    margin: 0 0 50px 0;
    overflow: scroll;
    overflow-x: hidden;
  }
}
</style>
